<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="serchForm" :model="form" :style="{ width: '100%' }">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="addCard" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select
                        style="width: 50%"
                        @change="typeFn"
                        v-model="type"
                        placeholder="first"
                      >
                        <a-option v-for="item in typeLists" :key="item.name" :value="item.value">{{
                          item.name
                        }}</a-option>
                      </a-select>
                      <a-input
                        style="width: 50%"
                        v-model="typeText"
                        allow-clear
                        placeholder="请输入搜索条件"
                        ><template #suffix>
                          <icon-plus @click="open(0)" style="cursor: pointer" /> </template
                      ></a-input>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="cards" hide-label>
                    <a-input v-model="form.cards" placeholder="请输入卡号" allow-clear
                      ><template #suffix>
                        <icon-plus @click="open(1)" style="cursor: pointer" /> </template
                    ></a-input>
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="4">
                  <a-form-item field="direct" hide-label>
                    <a-select v-model="form.direct" allow-clear placeholder="请选择卡板类型">
                      <a-option :value="1">所有订单</a-option>
                      <a-option :value="0">直属订单</a-option>
                    </a-select>
                  </a-form-item>
                </a-col> -->
                <a-col :span="4">
                  <a-form-item field="userIds" hide-label>
                    <a-select
                      v-model="form.userIds"
                      placeholder="请选择客户"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                      :options="userList"
                      :virtual-list-props="{ height: 200 }"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="channelIds" hide-label>
                    <!-- <a-select
                      v-model="form.channelIds"
                      placeholder="请选择渠道"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in channel" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select> -->
                    <a-tree-select
                      v-model="form.channelIds"
                      :allow-search="true"
                      :allow-clear="true"
                      :tree-checkable="true"
                      :tree-check-strictly="false"
                      :filter-tree-node="useCommon.filterTreeNode"
                      :data="channel"
                      :max-tag-count="1"
                      placeholder="请选择渠道"
                    />
                  </a-form-item>
                </a-col>

                <a-col :span="4">
                  <a-form-item field="seriesIds" hide-label>
                    <a-select
                      v-model="form.seriesIds"
                      multiple
                      :max-tag-count="1"
                      placeholder="请选择系列"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in series" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="payTemplateId" hide-label>
                    <a-select
                      v-model="form.payTemplateId"
                      placeholder="请选择支付模板"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in templateS" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :class="show == false ? 'hide' : ''" :gutter="24">
                <a-col :span="4">
                  <a-form-item field="setMealIds" hide-label>
                    <a-select
                      v-model="form.setMealIds"
                      placeholder="请选择套餐"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in meal" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="setMealTypes" hide-label>
                    <a-select
                      v-model="form.setMealTypes"
                      placeholder="请选择套餐类型"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                    >
                      <a-option value="0">无限叠加</a-option>
                      <a-option value="1">基础套餐</a-option>
                      <a-option value="2">叠加包</a-option>
                      <!-- <a-option value="3">体验包</a-option> -->
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="operators" hide-label>
                    <a-select
                      v-model="form.operators"
                      placeholder="请选择运营商"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                    >
                      <a-option :value="0">中国移动</a-option>
                      <a-option :value="1">中国联通</a-option>
                      <a-option :value="2">中国电信</a-option>
                      <a-option :value="3">中国广电</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="payTypes" hide-label>
                    <a-select
                      v-model="form.payTypes"
                      placeholder="请选择充值途径"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                    >
                      <a-option :value="0">余额</a-option>
                      <a-option :value="1">支付宝</a-option>
                      <a-option :value="2">微信</a-option>
                      <a-option :value="3">接口</a-option>
                      <a-option :value="4">批量</a-option>
                      <a-option :value="5">赠送</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="adminCollection" hide-label>
                    <a-select
                      v-model="form.adminCollection"
                      placeholder="请选择收款途径"
                      allow-clear
                    >
                      <a-option :value="1">系统收款</a-option>
                      <a-option :value="0">代理收款</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="effectives" hide-label>
                    <a-select
                      v-model="form.effectives"
                      multiple
                      :max-tag-count="1"
                      placeholder="请选择订单时间"
                      allow-clear
                    >
                      <a-option :value="0">立即生效</a-option>
                      <a-option :value="1">本月生效</a-option>
                      <a-option :value="2">次月生效</a-option>
                      <a-option :value="3">月底顺延</a-option>
                      <a-option :value="4">跨月顺延</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="firstCharge" hide-label>
                    <a-select v-model="form.firstCharge" allow-clear placeholder="请选择充值类型">
                      <a-option :value="1">首充 </a-option>
                      <a-option :value="0">续充</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="states" hide-label>
                    <a-select
                      v-model="form.states"
                      placeholder="请选择订单状态"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                    >
                      <a-option :value="0">等待</a-option>
                      <a-option :value="1">进行</a-option>
                      <a-option :value="2">成功</a-option>
                      <a-option :value="4">退款</a-option>
                      <a-option :value="3">失败</a-option>
                      <a-option :value="-1">删除</a-option></a-select
                    >
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addFlowRefreshTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.addTime"
                      show-time
                      placeholder="请选择开始充值时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endFlowRefreshTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.endTime"
                      show-time
                      placeholder="请选择结束充值时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addRefundTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.addRefundTime"
                      show-time
                      placeholder="请选择开始退款时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addRefundTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endRefundTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addRefundTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endRefundTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addRefundTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endRefundTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addRefundTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endRefundTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addRefundTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endRefundTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endRefundTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.endRefundTime"
                      show-time
                      placeholder="请选择结束退款时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addRefundTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endRefundTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addRefundTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endRefundTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addRefundTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endRefundTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addRefundTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endRefundTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addRefundTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endRefundTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addPaymentAmount" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        allow-clear
                        v-model="form.addPaymentAmount"
                        placeholder="开始支付金额"
                      />
                      <a-input
                        hide-button
                        allow-clear
                        v-model="form.endPaymentAmount"
                        placeholder="结束支付金额"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addNumber" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addNumber"
                        allow-clear
                        placeholder="开始充值次数"
                      />
                      <a-input
                        hide-button
                        v-model="form.endNumber"
                        allow-clear
                        placeholder="结束充值次数"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="4">
                  <a-form-item field="addQuantity" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input hide-button v-model="form.addQuantity" placeholder="开始购买数量" />
                      <a-input hide-button v-model="form.endQuantity" placeholder="结束购买数量" />
                    </a-input-group>
                  </a-form-item>
                </a-col> -->
                <a-col :span="4">
                  <a-form-item field="addCost" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addCost"
                        allow-clear
                        placeholder="开始订单成本"
                      />
                      <a-input
                        hide-button
                        v-model="form.endCost"
                        allow-clear
                        placeholder="结束订单成本"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addAmount" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addRebate"
                        allow-clear
                        placeholder="开始订单佣金"
                      />
                      <a-input
                        hide-button
                        v-model="form.endRebate"
                        allow-clear
                        placeholder="结束订单佣金"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addProfit" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addProfit"
                        allow-clear
                        placeholder="开始订单利润"
                      />
                      <a-input
                        hide-button
                        v-model="form.endProfit"
                        allow-clear
                        placeholder="结束订单利润"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="4">
                  <a-form-item field="addPayNumber" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input hide-button v-model="form.addPayNumber" placeholder="开始充值次数" />
                      <a-input hide-button v-model="form.endPayNumber" placeholder="结束充值次数" />
                    </a-input-group>
                  </a-form-item>
                </a-col> -->
              </a-row>
              <a-row>
                <a-col :span="4" :offset="20">
                  <a-form-item content-class=" flex justify-end" field="btns" hide-label>
                    <a-space :size="15">
                      <a-button
                        type="primary"
                        v-permission="orderList"
                        html-type="submit"
                        @click="doRefresh(1)"
                        ><template #icon>
                          <icon-search />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>搜索</template></a-button
                      >
                      <a-button v-permission="orderList" @click="reset"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                      <div style="color: #3491fa; cursor: pointer; width: 56px" @click="showFn"
                        >{{ text }}
                        <icon-down v-if="show == false" />
                        <icon-up v-else />
                      </div>
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button v-permission="exportorderList" @click="cardBalanceExports" type="outline">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>导出</template>
          </a-button>
          <a-button @click="orderHandle" type="outline">
            <template #default>批量处理</template>
          </a-button>
          <!-- <a-button @click="cardBalanceExports" type="outline">
            <template #default>批量编辑</template>
          </a-button>
          <a-button @click="cardBalanceExports" type="outline">
            <template #default>批量退款</template>
          </a-button> -->
        </a-space>
        <a-space :size="15">
          <SortableTable
            class="ml-4"
            :namere="tableColumns.neme"
            :columns="tableColumns.nsma"
            :oldList="nameMSG"
            @update="onUpdateTable"
          />
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :loading="tableLoading"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="table.dataList"
          :pagination="false"
          :row-key="rowKey"
          :row-class-name="rowClassNameFun"
          :row-selection="rowSelection"
          :scroll="scroll"
          v-model:selectedKeys="selectedKeys"
          @row-click="handleRowClick"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          @change="handleChange"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
              :sortable="item.sortable"
            >
              <template v-if="item.key === 'card'" #cell="{ record }">
                <div class="ba">
                  <img
                    v-if="record.payType === 0"
                    src="@/assets/order/y.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.payType === 1"
                    src="@/assets/order/zf.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.payType === 2"
                    src="@/assets/order/w.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.payType === 3"
                    src="@/assets/order/j.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.payType === 4"
                    src="@/assets/order/p.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.payType === 5"
                    src="@/assets/order/zs.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <span
                    v-if="record.card.card.length >= 20"
                    @click="useCommon.routerOne(record.card.card)"
                    class="card-number"
                    >{{ record.card.card }}</span
                  >
                  <span v-else @click="useCommon.routerOne(record.card.card)">{{
                    record.card.card
                  }}</span>
                  <icon-copy
                    size="18"
                    class="aa"
                    style="color: #3491fa; padding-left: 5px"
                    @click="useCommon.copy(record.card.card)"
                  />

                  <icon-search
                    size="18"
                    class="aa"
                    style="color: #3491fa; padding-left: 5px"
                    @click="detailFn(record)"
                  />
                </div>
              </template>
              <template v-if="item.key === 'stateName'" #cell="{ record }">
                <a-tag color="blue" v-if="record.number == 1"
                  >首充 <span style="margin-top: 2px">{{ record.number }}</span>
                </a-tag>
                <a-tag color="green" v-else
                  >续充<span style="margin-top: 2px">{{ record.number }}</span></a-tag
                >
              </template>

              <template v-if="item.key === 'payAmount'" #cell="{ record }">
                {{ Math.floor((record.receivedAmount - record.giveAmount) * 100) / 100 }}
              </template>
              <template v-if="item.key === 'effective'" #cell="{ record }">
                <a-tag color="blue" v-if="record.effectiveState == 0">立即生效</a-tag>
                <a-tag color="blue" v-else-if="record.effectiveState == 1">本月生效</a-tag>
                <a-tag color="green" v-if="record.effectiveState == 2">次月生效</a-tag>
                <a-tag color="green" v-else-if="record.effectiveState == 3">月底顺延</a-tag>
                <a-tag color="green" v-if="record.effectiveState == 4">跨月顺延</a-tag>
              </template>
              <template v-if="item.key === 'effectiveType'" #cell="{ record }">
                <a-tag color="red" v-if="record.effectiveType == 2">已失效</a-tag>
                <a-tag v-else-if="record.effectiveType == 0">待生效</a-tag>
                <a-tag color="blue" v-else-if="record.effectiveType == 1">已生效</a-tag>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="red" v-if="record.state == 4">退款</a-tag>
                <a-tag color="red" v-else-if="record.state == 3">失败</a-tag>
                <a-tag color="blue" v-else-if="record.state == 2">成功</a-tag>
                <a-tag color="gold" v-else-if="record.state == 1">进行</a-tag>
                <a-tag v-else-if="record.state == 0">等待</a-tag>
                <a-tag color="red" v-else-if="record.state == -1">删除</a-tag></template
              >
              <template v-else-if="item.key === 'payType'" #cell="{ record }">
                <div v-if="record.payType == 0"> 余额</div>
                <div v-if="record.payType == 1"> 支付宝</div>
                <div v-if="record.payType == 2"> 微信</div>
                <div v-if="record.payType == 3"> 接口</div>
                <div v-if="record.payType == 4"> 批量</div>
                <div v-if="detail.payType == 5"> 赠送</div>
              </template>
              <template v-else-if="item.key === 'userName'" #cell="{ record }">
                <span v-if="record.user">{{ record.user.userName }}</span>
                <span v-else>管理员 </span>
              </template>
              <template v-else-if="item.key === 'remarks'" #cell="{ record }">
                <span v-if="record.remarks">{{ record.remarks }}</span>
                <span v-else>--- </span>
              </template>
              <template v-else-if="item.key === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <!-- <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="detailFn1(record)"
                    >编辑</a-button
                  > -->
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="detailFn(record)"
                    >详情</a-button
                  >
                  <a-button
                    v-permission="submitlist"
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="massFn(record)"
                    >报文</a-button
                  >
                  <a-button
                    v-permission="RefundS"
                    @click="detailFns(record)"
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    status="warning"
                    >退款</a-button
                  >
                  <a-dropdown :popup-max-height="false" trigger="hover">
                    <a-button type="text" style="padding: 0px 4px" size="small"
                      ><div>更多</div></a-button
                    >
                    <template #content>
                      <a-doption v-permission="successs" @click="success(record.id)"
                        >成功</a-doption
                      >
                      <a-doption v-permission="successs" @click="fail(record.id)">失败</a-doption>
                      <a-doption v-permission="rebatelist" @click="rebateFn(record)"
                        >返佣</a-doption
                      >
                      <a-doption v-permission="successs" @click="upFn(record.id)">提交</a-doption>
                    </template>
                  </a-dropdown>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <div
          style="
            border: 1px solid rgba(229, 231, 235, var(--tw-border-opacity));
            border-top: 0;
            padding: 12px;
            text-align: left;
          "
          >统计：订单总金额:{{ total.amount }}元
          <span style="margin-left: 10px">支付金额: {{ total.payment_amount }}元</span>
          <span style="margin-left: 10px">返佣金额:{{ total.rebate }}元</span>
          <span style="margin-left: 10px">订单利润: {{ total.profit }}元</span>
        </div>
      </template>
      <template #footer>
        <TableFooter :pagination="pagination" />
      </template>
    </TableBody>
    <!-- 订单成功 -->
    <a-modal
      v-model:visible="successv"
      title="订单提交"
      width="400px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form :model="detail" layout="vertical">
        <a-form-item field="value1" label="提交上游">
          <a-radio-group class="radio-bcg" v-model="up">
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">提交</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">不提交</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div
              >提交:将订单提交给上游，订单改为成功状态，不提交:
              订单不提交给上游，直接将订单改为成功状态</div
            >
          </template>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="successv = false">取消</a-button>
          <a-button type="primary" @click="successFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 多卡搜索 -->
    <a-modal
      v-model:visible="cardsVisible"
      @before-close="colse"
      title="多条件搜索"
      width="400px"
      :mask-closable="false"
      title-align="start"
    >
      <a-textarea v-model="card" placeholder="请输入搜索条件，一行一个" allow-clear />
      <template #footer>
        <a-space>
          <a-button @click="cardsVisible = false">取消</a-button>
          <a-button type="primary" @click="cardsFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 多卡搜索 -->
    <a-modal
      v-model:visible="cardsVisibles"
      @before-close="colse"
      title="多卡搜索"
      width="400px"
      :mask-closable="false"
      title-align="start"
    >
      <a-textarea v-model="cards" placeholder="请输入搜索条件，一行一个" allow-clear />
      <template #footer>
        <a-space>
          <a-button @click="cardsVisibles = false">取消</a-button>
          <a-button type="primary" @click="cardsFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 退款 -->
    <a-modal
      v-model:visible="visibles"
      :on-before-close="beforeClose"
      :mask-closable="false"
      width="800px"
      title="订单退款"
    >
      <div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f2f3f5;
            width: 100%;
            height: 70px;
            padding: 0 50px;
          "
        >
          <div>
            <div style="text-align: center">{{ detail.obj.totalTraffic }}</div>
            <div style="text-align: center">总流量</div>
          </div>

          <div>
            <div style="text-align: center">{{ detail.obj.usedTraffic }}</div>
            <div style="text-align: center">已用流量</div>
          </div>
          <div>
            <div style="text-align: center">{{
              detail.flowUsed >= 1024
                ? Math.floor((detail.flowUsed / 1024) * 100) / 100 + 'G'
                : detail.flowUsed > 0 && detail.flowUsed < 1024
                ? Math.floor(detail.flowUsed * 100) / 100 + 'M'
                : 0 + 'M'
            }}</div>
            <div style="text-align: center">真实已用</div>
          </div>
          <div>
            <div style="text-align: center">{{ detail.obj.remainingTraffic }}</div>
            <div style="text-align: center">剩余流量</div>
          </div>
          <div>
            <div style="text-align: center">{{ detail.obj.remainingRatio }}</div>
            <div style="text-align: center">剩余比例</div>
          </div>
        </div>
        <div style="font-size: 11px; color: #86909c; margin-bottom: 20px; margin-top: 10px"
          >如果是API的卡，流量数据无法正常显示，请忽略流量数据</div
        >
        <a-form ref="details" :model="detail">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="value1" label="订单ID" label-col-flex="80px">
                <a-input v-model="detail.id" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value2" label="订单号" label-col-flex="80px">
                <a-input v-model="detail.outTradeNo" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value2" label="套餐名称" label-col-flex="80px">
                <a-input v-model="detail.setMealName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值时间" label-col-flex="80px">
                <a-input v-model="detail.createTime" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="套餐时间" label-col-flex="80px">
                <div class="radio-bcg">
                  <span v-if="detail.validityMore == false"
                    >{{ detail.validity }}{{ detail.validityType == 0 ? '天' : '月' }}</span
                  >
                  <span v-else
                    >{{ detail.validityType == 0 ? detail.validity * 30 : detail.validity
                    }}{{ detail.validityType == 0 ? '天' : '月' }}</span
                  >
                </div>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="detail.validityMore">
              <a-form-item field="value3" label="套餐期数" label-col-flex="80px">
                <div class="radio-bcg"> {{ detail.pageNumber }}期/{{ detail.validity }}期 </div>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值途径" label-col-flex="80px">
                <a-input v-model="detail.typeName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值金额" label-col-flex="80px">
                <a-input v-model="detail.paymentAmount" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="订单佣金" label-col-flex="80px">
                <a-input v-model="detail.rebate" readonly />
                <template #extra>
                  <div>本条订单产生的佣金</div>
                </template>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="收回返佣" label-col-flex="80px">
                <a-radio-group class="radio-bcg" v-model="detail.recovery">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div> </div
                        ><div className="custom-radio-card-title">收回</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div> </div
                        ><div className="custom-radio-card-title">不收回</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
                <template #extra>
                  <div>收回佣金，将会对本条订单产生的佣金全部收回</div>
                </template>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="原路途径" label-col-flex="80px">
                <a-input v-model="detail.typeName" readonly />
                <template #extra>
                  <div>原路退款的途径</div>
                </template>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款金额" label-col-flex="80px">
                <a-input-search
                  v-model="detail.refundAmount"
                  search-button
                  button-text="自动计算"
                  @search="jiFn"
                />
                <template #extra>
                  <div>退款金额是指推给客户的金额</div>
                </template>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款备注" label-col-flex="80px">
                <a-input v-model="detail.refundRemarks" placeholder="请输入退款备注" />
                <template #extra>
                  <div>退款备注，非必填</div>
                </template>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <template #footer>
        <a-space style="width: 100%; display: flex; justify-content: center">
          <a-button type="primary" @click="refundFn(1)">原路退款</a-button>
          <a-button type="primary" status="success" @click="refundFn(0)">手动退款</a-button>
          <a-button type="primary" status="success" @click="refundFn(2)">余额退款</a-button>
        </a-space>
      </template>
    </a-modal>
    <!--编辑订单 -->
    <!-- <a-modal
      v-model:visible="visibleDetails"
      @before-close="handleCancel"
      title="编辑订单"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <div>
        <a-form ref="userForm" :auto-label-width="true" :model="detail">
          <a-form-item field="id" label="订单ID">
            <a-input hide-button v-model="detail.id" readonly placeholder="请输入备注" />
          </a-form-item>
          <a-form-item field="setMealName" label="套餐名称">
            <a-input hide-button v-model="detail.setMealName" readonly placeholder="请输入备注" />
          </a-form-item>
          <a-form-item field="remarks" label="流量方案">
            <a-input hide-button readonly v-model="detail.remarks" placeholder="请输入备注" />
          </a-form-item>
          <a-form-item field="remarks" label="系统流量">
            <a-input hide-button readonly v-model="detail.remarks" placeholder="请输入备注" />
          </a-form-item>
          <a-form-item field="remarks" label="显示流量">
            <a-input hide-button readonly v-model="detail.remarks" placeholder="请输入备注" />
          </a-form-item>
          <a-form-item field="effectiveState" label="订单时间">
            <a-select v-model="detail.effectiveState" placeholder="请选择订单时间">
              <a-option :value="0">立即生效</a-option>
              <a-option :value="1">本月生效</a-option>
              <a-option :value="2">次月生效</a-option>
              <a-option :value="3">月底顺延</a-option>
              <a-option :value="4">跨月顺延</a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="endRefundTime" label="生效时间">
            <a-date-picker
              style="width: 100%"
              v-model="form.endRefundTime"
              show-time
              placeholder="请选择生效时间"
              :time-picker-props="{ defaultValue: '12:00:00' }"
              format="YYYY-MM-DD HH:mm:ss"
              allow-clear
            />
          </a-form-item>
          <a-form-item field="endRefundTime" label="到期时间">
            <a-date-picker
              style="width: 100%"
              v-model="form.endRefundTime"
              show-time
              placeholder="请选择到期时间"
              :time-picker-props="{ defaultValue: '12:00:00' }"
              format="YYYY-MM-DD HH:mm:ss"
              allow-clear
            /> </a-form-item
        ></a-form>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleBeforeOk">确定</a-button>
        </a-space>
      </template>
    </a-modal> -->
    <!--报文日志 -->
    <a-modal
      v-model:visible="rizhiVisible"
      title="报文日志"
      width="800px"
      :mask-closable="false"
      title-align="start"
    >
      <div>
        <a-table :columns="columns" :pagination="false" :data="massList">
          <template #columns>
            <a-table-column
              v-for="item of columns"
              :key="item.dataIndex"
              align="left"
              :width="item.width"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.dataIndex === 'name'" #cell="{ record }">
                <span>{{ record.admin ? record.admin.userName : '- - -' }}</span>
              </template>
              <template v-if="item.dataIndex === 'type'" #cell="{ record }">
                <span>{{ record.type == 0 ? '手动提交' : '自动提交' }}</span>
              </template>
              <template v-if="item.dataIndex === 'timing'" #cell="{ record }">
                <span>{{ Math.floor((record.timing / 1000) * 100) / 100 }}秒</span>
              </template>
              <template v-if="item.dataIndex === 'time'" #cell="{ record }">
                <span>{{ record.time }}</span>
              </template>
              <template v-if="item.dataIndex === 'success'" #cell="{ record }">
                <a-tag color="red" v-if="record.success == false">失败</a-tag>
                <a-tag color="blue" v-else-if="record.success == true">成功</a-tag>
              </template>
              <template v-if="item.dataIndex === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="detailFny(record)"
                    >详情</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!--报文 -->
    <a-modal
      v-model:visible="messageVisibles"
      title="报文详情"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <div>
        <a-form ref="userForm" :auto-label-width="true" :model="messDetails">
          <a-form-item field="url" label="请求链接">
            <a-textarea
              class="nonecopy"
              v-model="messDetails.url"
              @click="useCommon.copy(messDetails.url)"
              readonly
            />
          </a-form-item>
          <a-form-item field="headers" v-if="messDetails.headers" label="请求头">
            <a-textarea
              v-model="messDetails.headers"
              readonly
              @click="useCommon.copy(messDetails.headers)"
            />
          </a-form-item>
          <a-form-item field="body" v-if="messDetails.body" label="请求参数">
            <a-textarea
              v-model="messDetails.body"
              readonly
              @click="useCommon.copy(messDetails.body)"
            />
          </a-form-item>
          <a-form-item field="result" label="上游报文">
            <a-textarea
              v-model="messDetails.result"
              readonly
              @click="useCommon.copy(messDetails.result)"
            /> </a-form-item
          ><a-form-item field="id" label="常见问题">
            <a-collapse :default-active-key="['1']">
              <a-collapse-item header="为什么会失败，具体是怎么回事要怎么解决？" key="1">
                <div>1：操作失败一般都是上游的问题</div>
                <div>2：怎么解决：联系上游，将报文发送给上游咨询解决方法</div>
                <div
                  >3：为什么会操作失败，比如系统给上游说了一句话，上游告诉系统说不
                  行，然后系统这边就无法正常处理操作</div
                >
                <div
                  >4：名词解释：请求链接为系统通过什么途径对上游说话；请求参数为系
                  统对上游说的话；上游报文为上游给系统的回话</div
                >
              </a-collapse-item>
            </a-collapse>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!--返佣列表 -->
    <a-modal
      v-model:visible="rebateVisible"
      title="返佣列表"
      width="800px"
      :mask-closable="false"
      title-align="start"
    >
      <div>
        <a-table :columns="columns1" :pagination="false" :data="rebateList">
          <template #columns>
            <a-table-column
              v-for="item of columns1"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'userId'" #cell="{ record }">
                <span>{{ record.user.userName }}</span>
              </template>
              <template v-if="item.key === 'amount'" #cell="{ record }">
                <span>{{ record.amount }}元</span>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="green" v-if="record.state == 0">等待返佣</a-tag>
                <a-tag color="blue" v-else-if="record.state == 1">返佣成功</a-tag>
                <a-tag color="gold" v-else-if="record.state == 2">返佣回收</a-tag>
                <a-tag color="red" v-else-if="record.state == 3">回收失败</a-tag>
                <a-tag color="red" v-else-if="record.state == 4">返佣失败</a-tag></template
              >
              <template v-if="item.key === 'action'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="rebateDel(record)"
                    >收回</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <a-modal
      :mask-closable="false"
      @before-close="cancel"
      @close="cancel"
      v-model:visible="showV"
      title="批量处理"
      width="600px"
      title-align="start"
    >
      <a-form ref="showRef" class="huakaClass" :auto-label-width="true" :model="handleForm">
        <a-form-item field="success" label="操作状态">
          <a-radio-group class="radio-bcg" v-model="handleForm.success">
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">成功</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">失败</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="up" v-if="handleForm.success == 1" label-width="40px" label="提交上游">
          <a-radio-group class="radio-bcg" v-model="handleForm.up">
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">提交</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">不提交</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <div v-if="errorList.length > 0">
        <div style="padding-bottom: 20px">
          <a-divider dashed>处理详情</a-divider>
        </div>
        <div
          style="
            background-color: #f2f3f5;
            overflow-y: scroll;
            padding: 10px 15px;
            height: 200px;
            width: 100%;
            border-radius: 5px;
          "
        >
          <div v-for="item in errorList" :key="item">
            {{ item }}
          </div>
        </div>
        <a-progress
          :show-text="false"
          size="large"
          :percent="(zong.success + zong.error) / selectedKeys.length"
        />
        <a-row>
          <a-col :span="6"> 处理数量:{{ selectedKeys.length }} </a-col>
          <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
          <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
        </a-row>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="cancel">取消</a-button>
          <a-button :loading="loading1" type="primary" @click="OKHan">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-drawer
      :width="1000"
      v-model:visible="visible"
      :mask-closable="false"
      title-align="start"
      title="订单详情"
      :footer="false"
    >
      <div class="padding20">
        <div class="box">
          <div class="line"></div>
          <div class="text">基本信息 </div>
        </div>
      </div>
      <a-row class="padding20">
        <a-col :span="12">
          <div class="display-box">
            <img v-if="detail.payType === 0" src="@/assets/order/y.jpg" class="imgsa1" mode="" />
            <img v-if="detail.payType === 1" src="@/assets/order/zf.png" class="imgsa1" mode="" />
            <img v-if="detail.payType === 2" src="@/assets/order/w.png" class="imgsa1" mode="" />
            <img v-if="detail.payType === 3" src="@/assets/order/j.jpg" class="imgsa1" mode="" />
            <img v-if="detail.payType === 4" src="@/assets/order/p.jpg" class="imgsa1" mode="" />
            <img v-if="detail.payType === 5" src="@/assets/order/zs.jpg" class="imgsa1" mode="" />
            <div class="display-right">
              <div class="text-name">
                <span
                  style="
                    background-color: rgba(29, 33, 41, 0.1);
                    height: 20px;
                    display: flex;
                    align-items: center;
                  "
                  ><img
                    class="imgsa"
                    v-if="detail.card.series.operator == 0"
                    src="@/assets/yd.png"
                    alt="" />
                  <img
                    class="imgsa"
                    v-if="detail.card.series.operator == 1"
                    src="@/assets/lt.png"
                    alt="" />
                  <img
                    class="imgsa"
                    v-if="detail.card.series.operator == 2"
                    src="@/assets/dx.png"
                    alt="" />
                  <img
                    class="imgsa"
                    v-if="detail.card.series.operator == 3"
                    src="@/assets/gd.png"
                    alt=""
                /></span>
                <span style="margin-left: 5px">{{ detail.card.card }}</span>
              </div>
              <div class="text">充值套餐：{{ detail.setMealName }}</div>
              <div class="text">充值时间：{{ detail.createTime }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="12">
          <div style="float: right">
            <div>
              <a-space style="float: right">
                <a-button class="width75px" size="small" @click="previousFn"> 上一单</a-button>
                <a-button class="width75px" size="small" @click="nextFn"> 下一单 </a-button>
                <a-button
                  class="width75px"
                  type="primary"
                  status="warning"
                  size="small"
                  @click="detailFns(detail)"
                  >退款</a-button
                >
                <a-button class="width75px" type="primary" size="small" @click="upFn(detail.id)"
                  >提交</a-button
                >
              </a-space>
            </div>
            <div class="white" style="margin-top: 14px; float: right">
              <a-space>
                <a-button size="small" class="width75px" @click="openOrderTime">编辑订单</a-button>
                <a-button size="small" class="width75px" @click="success(detail.id)"
                  >成功订单</a-button
                >
                <a-button size="small" class="width75px" @click="fail(detail.id)"
                  >失败订单</a-button
                >
                <a-button size="small" class="width75px" @click="delOrder(detail)"
                  >删除订单</a-button
                >
              </a-space>
            </div>
          </div>
        </a-col>
      </a-row>
      <div
        style="
          margin-top: 20px;
          border-top: 1px solid #f2f3f5;
          border-bottom: 1px solid #f2f3f5;
          padding: 20px 0;
        "
      >
        <a-grid :cols="6" :colGap="12" :rowGap="16" class="grid-demo-grid padding20">
          <a-grid-item class="demo-item">
            <div class="text-name">套餐类型</div>
            <div class="text-info">
              <span v-if="detail.setMealType == 0">无限叠加</span>
              <span v-else-if="detail.setMealType == 1">基础套餐</span>
              <span v-else-if="detail.setMealType == 2">叠加包</span>
              <!-- <span v-else-if="detail.setMealType == 3">体验包</span> -->
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单时间</div>
            <div class="text-info">
              <a-tag color="blue" v-if="detail.effectiveState == 0">立即生效</a-tag>
              <a-tag color="blue" v-else-if="detail.effectiveState == 1">本月生效</a-tag>
              <a-tag color="green" v-if="detail.effectiveState == 2">次月生效</a-tag>
              <a-tag color="green" v-else-if="detail.effectiveState == 3">月底顺延</a-tag>
              <a-tag color="green" v-if="detail.effectiveState == 4">跨月顺延</a-tag>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单状态</div>
            <div class="text-info">
              <a-tag color="red" v-if="detail.state == 4">退款</a-tag>
              <a-tag color="red" v-else-if="detail.state == 3">失败</a-tag>
              <a-tag color="blue" v-else-if="detail.state == 2">成功</a-tag>
              <a-tag color="gold" v-else-if="detail.state == 1">进行</a-tag>
              <a-tag v-else-if="detail.state == 0">等待</a-tag>
              <a-tag color="red" v-else-if="detail.state == -1">删除</a-tag>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">生效状态</div>
            <div class="text-info">
              <a-tag color="red" v-if="detail.effectiveType == 2">已失效</a-tag>
              <a-tag color="blue" v-else-if="detail.effectiveType == 0">待生效</a-tag>
              <a-tag color="blue" v-else-if="detail.effectiveType == 1">已生效</a-tag>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单类型</div>
            <div class="text-info"
              ><a-tag color="blue" v-if="detail.number == 1">首充{{ detail.number }}</a-tag>
              <a-tag color="green" v-else>续充{{ detail.number }}</a-tag>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">套餐流量</div>
            <div class="text-info">
              <span v-if="!detail.flowVirtual && !detail.flowReal"> 无限</span>
              <span v-else-if="detail.flowVirtual || (detail.flowReal && detail.flowVirtual)">{{
                detail.flowVirtual >= 1024
                  ? Math.floor((detail.flowVirtual / 1024) * 100) / 100 + 'G'
                  : Math.floor(detail.flowVirtual * 100) / 100 + 'M'
              }}</span>
              <span v-else-if="detail.flowReal">{{
                detail.flowReal >= 1024
                  ? Math.floor((detail.flowReal / 1024) * 100) / 100 + 'G'
                  : Math.floor(detail.flowReal * 100) / 100 + 'M'
              }}</span>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">总金额</div>
            <div class="text-info">{{ detail.amount }}元 </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">支付金额</div>
            <div class="text-info">{{ detail.paymentAmount }}元 </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">立减金额</div>
            <div class="text-info">{{ detail.randomReduction }}元 </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单成本</div>
            <div class="text-info">{{ detail.adminCost }}元 </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单返佣</div>
            <div class="text-info">{{ detail.rebate }}元 </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单利润</div>
            <div class="text-info">{{ detail.profit }}元 </div>
          </a-grid-item>
        </a-grid>
      </div>
      <div class="tabs-button padding20">
        <a-radio-group style="width: 100%" v-model="key" type="button">
          <a-radio value="order">订单详情</a-radio>
          <a-radio value="rebates" @click="rebateFn(detail.id, 1)">订单返佣</a-radio>
          <a-radio value="log" @click="massFn(detail, 1)">报文日志</a-radio>
          <a-radio value="meal" @click="doRefreshOrder(1)">套餐订单</a-radio>
          <a-radio value="balanceOrder" @click="doRefreshOperate5(1)">余额订单</a-radio>
          <a-radio value="coupon" @click="couponOrderdoRefresh(1)">券包订单</a-radio>
          <a-radio value="change" @click="changeOrderdoRefresh(1)">换卡订单</a-radio>
          <a-radio value="vip" @click="vipOrderdoRefresh(1)">会员订单</a-radio>
        </a-radio-group>
      </div>
      <div v-if="key == 'order'" class="col-div">
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">订单信息 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12"> 所属客户：{{ detail.user ? detail.user.userName : '管理员' }} </a-col>
          <a-col :span="12">
            套餐周期：
            <span v-if="detail.setMealType == 2"> 跟随套餐 </span>
            <span v-else>{{ detail.validity }}{{ detail.validityType == 0 ? '天' : '月' }}</span>
          </a-col>
          <a-col :span="12"> 客户成本：{{ detail.userCost ? detail.userCost + '元' : '' }} </a-col>
          <a-col :span="12"> 优惠金额：{{ detail.discountAmount }}元</a-col>
          <a-col :span="12"> 客户IP：{{ detail.ip }} </a-col>
          <a-col :span="12"> 客户地址：{{ detail.ipAddress }} </a-col>
          <a-col :span="12"> 所属渠道：{{ detail.card.series.channel.name }} </a-col>
          <a-col :span="12"> 所属系列：{{ detail.card.series.name }} </a-col>
          <a-col :span="12"> 成功时间：{{ detail.successTime }} </a-col>
          <a-col :span="12"> 备注：{{ detail.remarks }} </a-col>
        </a-row>
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">支付信息 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12">
            支付名称：{{ detail.payTemplate ? detail.payTemplate.name : '' }}
          </a-col>
          <a-col :span="12">
            支付商户号：
            {{ detail.payTemplate ? detail.payTemplate.merchantNo : '' }}
          </a-col>
          <a-col :span="12"> 商户订单号：{{ detail.outTradeNo }} </a-col>
          <a-col :span="12"> 支付订单号：{{ detail.tradeNo }} </a-col>
        </a-row>
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">退款信息 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12">
            退款类型：<span v-if="detail.refundType == 0"> 手动退款</span>
            <span v-else-if="detail.refundType == 1"> 原路退回</span>
            <span v-else-if="detail.refundType == 2"> 余额退款</span>
          </a-col>
          <a-col :span="12">
            退款金额：
            {{ detail.refundAmount }}
          </a-col>
          <a-col :span="12"> 退款时间：{{ detail.refundTime }} </a-col>
          <a-col :span="12"> 退款备注：{{ detail.refundRemarks }} </a-col>
        </a-row>
      </div>
      <div v-if="key == 'rebates'" class="col-div">
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">返佣列表 </div>
          </div>
        </div>
        <a-table :columns="columns1" :pagination="false" :data="rebateList">
          <template #columns>
            <a-table-column
              v-for="item of columns1"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'userId'" #cell="{ record }">
                <span>{{ record.user.userName }}</span>
              </template>
              <template v-if="item.key === 'amount'" #cell="{ record }">
                <span>{{ record.amount }}元</span>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="green" v-if="record.state == 0">等待返佣</a-tag>
                <a-tag color="blue" v-else-if="record.state == 1">返佣成功</a-tag>
                <a-tag color="gold" v-else-if="record.state == 2">返佣回收</a-tag>
                <a-tag color="red" v-else-if="record.state == 3">回收失败</a-tag>
                <a-tag color="red" v-else-if="record.state == 4">返佣失败</a-tag></template
              >
              <template v-if="item.key === 'action'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="rebateDel(record, 1)"
                    >收回</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
      <div v-if="key == 'log'" class="col-div">
        <div>
          <div class="box">
            <div class="line"></div>
            <div class="text">报文列表 </div>
          </div>
        </div>
        <a-table :columns="columns" :pagination="false" :data="massList">
          <template #columns>
            <a-table-column
              v-for="item of columns"
              :key="item.dataIndex"
              align="left"
              :width="item.width"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.dataIndex === 'name'" #cell="{ record }">
                <span>{{ record.admin ? record.admin.userName : '- - -' }}</span>
              </template>
              <template v-if="item.dataIndex === 'type'" #cell="{ record }">
                <span>{{ record.type == 0 ? '手动提交' : '自动提交' }}</span>
              </template>
              <template v-if="item.dataIndex === 'timing'" #cell="{ record }">
                <span>{{ Math.floor((record.timing / 1000) * 100) / 100 }}秒</span>
              </template>
              <template v-if="item.dataIndex === 'time'" #cell="{ record }">
                <span>{{ record.time }}</span>
              </template>
              <template v-if="item.dataIndex === 'success'" #cell="{ record }">
                <a-tag color="red" v-if="record.success == false">失败</a-tag>
                <a-tag color="blue" v-else-if="record.success == true">成功</a-tag>
              </template>
              <template v-if="item.dataIndex === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="detailFny(record)"
                    >详情</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
      <div v-if="key == 'meal'" class="col-div">
        <a-table
          :scroll="{ x: 1200 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          :columns="columnsMeal"
          :loading="load1"
          :pagination="false"
          :data="mealOrderArray"
        >
          <template #columns>
            <a-table-column
              v-for="item of columnsMeal"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'setMealName'" #cell="{ record }">
                <span>{{ record.setMealName }}</span>
              </template>
              <template v-if="item.key === 'paymentAmount'" #cell="{ record }">
                <span>{{ record.paymentAmount }}</span>
              </template>
              <template v-if="item.key === 'createTime'" #cell="{ record }">
                <span>{{ record.createTime }}</span>
              </template>
              <template v-if="item.key === 'effective'" #cell="{ record }">
                <a-tag color="blue" v-if="record.effectiveState == 0">立即生效</a-tag>
                <a-tag color="blue" v-else-if="record.effectiveState == 1">本月生效</a-tag>
                <a-tag color="blue" v-if="record.effectiveState == 2">次月生效</a-tag>
                <a-tag color="blue" v-else-if="record.effectiveState == 3">月底顺延</a-tag>
                <a-tag color="blue" v-if="record.effectiveState == 4">跨月顺延</a-tag>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="red" v-if="record.state == 4">退款</a-tag>
                <a-tag color="red" v-else-if="record.state == 3">失败</a-tag>
                <a-tag color="blue" v-else-if="record.state == 2">成功</a-tag>
                <a-tag color="orangered" v-else-if="record.state == 1">进行</a-tag>
                <a-tag color="orangered" v-else-if="record.state == 0">等待</a-tag>
                <a-tag color="red" v-else-if="record.state == -1">删除</a-tag></template
              >
              <template v-else-if="item.key === 'payType'" #cell="{ record }">
                <div v-if="record.payType == 0"> 余额</div>
                <div v-if="record.payType == 1"> 支付宝</div>
                <div v-if="record.payType == 2"> 微信</div>
                <div v-if="record.payType == 3"> 接口</div>
                <div v-if="record.payType == 4"> 批量</div>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="pagination1" />
      </div>
      <div v-if="key == 'balanceOrder'" class="col-div">
        <a-table :columns="columns5" :loading="load2" :pagination="false" :data="rebateLists5">
          <template #columns>
            <a-table-column
              v-for="item of columns5"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'paymentAmount'" #cell="{ record }">
                <span>{{ record.paymentAmount }}元</span>
              </template>
              <template v-if="item.key === 'createTime'" #cell="{ record }">
                <span>{{ record.createTime }}</span>
              </template>
              <template v-else-if="item.key === 'type'" #cell="{ record }">
                <div v-if="record.type == 0"> 支付宝</div>
                <div v-if="record.type == 1"> 微信</div>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="pagination5" />
      </div>
      <div v-if="key == 'coupon'" class="col-div">
        <a-table
          style="margin-top: 20px"
          :loading="loading10"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="couponOrderList"
          :pagination="false"
          :row-key="rowKey"
          :scroll="{ x: 1500 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns4.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'couponName'" #cell="{ record }">
                <div class="ba">
                  <img
                    v-if="record.type === 0"
                    src="@/assets/order/zf.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.type === 1"
                    src="@/assets/order/w.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.type === 2"
                    src="@/assets/order/p.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.type === 3"
                    src="@/assets/order/zs.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <span>{{ record.couponName }}</span>
                </div>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="blue" v-if="record.state == 0">正常</a-tag>
                <a-tag color="red" v-if="record.state == 1">退款</a-tag>
              </template>

              <template v-else-if="item.key === 'couponCount'" #cell="{ record }">
                <span>{{ record.num }}/{{ record.couponCount }}</span>
              </template>
              <template v-else-if="item.key === 'couponAmount'" #cell="{ record }">
                <span>{{ record.couponAllAmount }}</span>
              </template>
              <template v-else-if="item.key === 'paymentAmount'" #cell="{ record }">
                <span>{{ Math.floor(record.paymentAmount * 100) / 100 }}</span>
              </template>
              <template v-else-if="item.key === 'userName'" #cell="{ record }">
                <span v-if="record.user">{{ record.user.userName }}</span>
                <span v-else>管理员 </span>
              </template>
              <template v-else-if="item.key === 'endUseTime'" #cell="{ record }">
                <span v-if="record.endUseTime">{{ record.endUseTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'addUseTime'" #cell="{ record }">
                <span v-if="record.addUseTime">{{ record.addUseTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'refundTime'" #cell="{ record }">
                <span v-if="record.refundTime">{{ record.refundTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'refundRemarks'" #cell="{ record }">
                <span v-if="record.refundRemarks">{{ record.refundRemarks }}</span>
                <span v-else>---</span>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="paginationCoupon" />
      </div>
      <div v-if="key == 'change'" class="col-div">
        <a-table
          style="margin-top: 20px"
          :loading="load8"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="orderChangeList"
          :pagination="false"
          :row-key="rowKey"
          :scroll="{ x: 1500 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns3.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'newCard'" #cell="{ record }">
                <div class="ba" v-if="record.newCard">
                  <span>{{ record.newCard.card }}</span>
                </div>
              </template>

              <template v-if="item.key === 'applyTime'" #cell="{ record }">
                <div class="ba" v-if="record.newCard">
                  <img
                    v-if="record.type === 0"
                    src="@/assets/order/zf.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.type === 1"
                    src="@/assets/order/w.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <span v-if="record.applyTime">{{ record.applyTime }}</span>
                  <span v-else>- - -</span>
                </div>
              </template>
              <template v-if="item.key === 'cardSpecies'" #cell="{ record }">
                <span v-if="record.cardSpecies">{{ record.cardSpecies }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-if="item.key === 'handlerTime'" #cell="{ record }">
                <span v-if="record.handlerTime">{{ record.handlerTime }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-if="item.key === 'remarks'" #cell="{ record }">
                <span v-if="record.remarks">{{ record.remarks }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-if="item.key === 'handlerRemarks'" #cell="{ record }">
                <span v-if="record.refundRemarks">{{ record.refundRemarks }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-if="item.key === 'refundRemarks'" #cell="{ record }">
                <span v-if="record.refundRemarks">{{ record.refundRemarks }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-if="item.key === 'payAmount'" #cell="{ record }">
                {{ Math.floor((record.receivedAmount - record.giveAmount) * 100) / 100 }}
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="blue" v-if="record.state == 0">等待审核</a-tag>
                <a-tag color="blue" v-if="record.state == 1">正在审核</a-tag>
                <a-tag color="blue" v-if="record.state == 2">审核成功</a-tag>
                <a-tag color="red" v-if="record.state == 3">审核驳回</a-tag>
                <a-tag color="red" v-if="record.state == 4">退款</a-tag>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="paginationChange" />
      </div>
      <div v-if="key == 'vip'" class="col-div">
        <a-table
          style="margin-top: 20px"
          :loading="stateVisiblekl"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="vipOrderList"
          :pagination="false"
          :row-key="rowKey"
          :scroll="{ x: 1500 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns5.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'vipName'" #cell="{ record }">
                <div class="ba">
                  <img
                    v-if="record.type === 0"
                    src="@/assets/order/y.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.type === 1"
                    src="@/assets/order/zf.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.type === 2"
                    src="@/assets/order/w.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <span>{{ record.vipName }}</span>
                </div>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="blue" v-if="record.state == 0">正常</a-tag>
                <a-tag color="red" v-if="record.state == 1">退款</a-tag>
              </template>
              <template v-else-if="item.key === 'couponCount'" #cell="{ record }">
                <span>{{ record.vipTime }}{{ record.vipTimeType == 0 ? '天' : '月' }}</span>
              </template>
              <template v-else-if="item.key === 'couponAmount'" #cell="{ record }">
                <span>{{ record.couponAmount }}/{{ record.couponAllAmount }}</span>
              </template>
              <template v-else-if="item.key === 'userName'" #cell="{ record }">
                <span v-if="record.user">{{ record.user.userName }}</span>
                <span v-else>管理员 </span>
              </template>
              <template v-else-if="item.key === 'endUseTime'" #cell="{ record }">
                <span v-if="record.endUseTime">{{ record.endUseTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'addUseTime'" #cell="{ record }">
                <span v-if="record.addUseTime">{{ record.addUseTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'refundTime'" #cell="{ record }">
                <span v-if="record.refundTime">{{ record.refundTime }}</span>
                <span v-else>---</span>
              </template>
              <template v-else-if="item.key === 'refundRemarks'" #cell="{ record }">
                <span v-if="record.refundRemarks">{{ record.refundRemarks }}</span>
                <span v-else>---</span>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="paginationVip" />
      </div>
    </a-drawer>
    <!-- 编辑订单 -->
    <a-modal
      v-model:visible="orderTimeShow"
      @before-close="closeOrderTime"
      title="编辑订单"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form :auto-label-width="true" :model="detail">
        <a-form-item field="effectiveState" label="订单ID" asterisk-position="end">
          <div class="radio-bcg">{{ detail.id }}</div>
        </a-form-item>
        <a-form-item field="effectiveState" label="套餐名称" asterisk-position="end">
          <div class="radio-bcg">{{ detail.setMealName }}</div>
        </a-form-item>
        <a-form-item
          v-if="detail.flowReal"
          field="flowReal"
          label="系统流量"
          asterisk-position="end"
        >
          <a-input-number
            v-model="detail.flowReal"
            placeholder="请输入系统流量(单位MB)"
            hide-button
            allow-clear
          >
            <template #append>
              <a-button type="primary" @click="change1024(detail.flowReal, 1)"> 换算 </a-button>
            </template>
          </a-input-number>
        </a-form-item>
        <a-form-item
          v-if="detail.flowVirtual"
          field="flowVirtual"
          label="显示流量"
          asterisk-position="end"
        >
          <a-input-number
            v-model="detail.flowVirtual"
            placeholder="请输入显示流量(单位MB)"
            hide-button
            allow-clear
          >
            <template #append>
              <a-button type="primary" @click="change1024(detail.flowVirtual, 3)"> 换算 </a-button>
            </template>
          </a-input-number>
        </a-form-item>
        <a-form-item field="effectiveState" label="开始时间" asterisk-position="end">
          <a-select v-model="detail.effectiveState" placeholder="请选择订单时间">
            <a-option :value="0">立即生效</a-option>
            <a-option :value="1">本月生效</a-option>
            <a-option :value="2">次月生效</a-option>
            <a-option :value="3">月底顺延</a-option>
            <a-option :value="4">跨月顺延</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="effectiveTime" label="开始时间" asterisk-position="end">
          <a-date-picker
            style="width: 100%"
            v-model="detail.effectiveTime"
            show-time
            :allow-clear="false"
            placeholder="请选择开始时间"
            :disabledDate="changeTraceEnd"
            :time-picker-props="{ defaultValue: '12:00:00' }"
            format="YYYY-MM-DD HH:mm:ss"
            :shortcuts="[
              {
                label: '本月时间',
                value: () => (
                  (detail.effectiveTime = $dayjs(detail.createTime).format('YYYY-MM-DD HH:mm:ss')),
                  (detail.expirationTime = $dayjs(detail.createTime)
                    .endOf('month')
                    .format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
              {
                label: '次月时间',
                value: () => (
                  (detail.effectiveTime = $dayjs(detail.createTime)
                    .add(1, 'month')
                    .startOf('month')
                    .format('YYYY-MM-DD HH:mm:ss')),
                  (detail.expirationTime = $dayjs(detail.createTime)
                    .add(1, 'month')
                    .endOf('month')
                    .format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
            ]"
          />
        </a-form-item>
        <a-form-item field="expirationTime" label="结束时间" asterisk-position="end">
          <a-date-picker
            style="width: 100%"
            v-model="detail.expirationTime"
            show-time
            :allow-clear="false"
            placeholder="请选择结束时间"
            :disabledDate="changeTraceStart"
            :time-picker-props="{ defaultValue: '12:00:00' }"
            format="YYYY-MM-DD HH:mm:ss"
            :shortcuts="[
              {
                label: '本月时间',
                value: () => (
                  (detail.effectiveTime = $dayjs(detail.createTime).format('YYYY-MM-DD HH:mm:ss')),
                  (detail.expirationTime = $dayjs(detail.createTime)
                    .endOf('month')
                    .format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
              {
                label: '次月时间',
                value: () => (
                  (detail.effectiveTime = $dayjs(detail.createTime)
                    .add(1, 'month')
                    .startOf('month')
                    .format('YYYY-MM-DD HH:mm:ss')),
                  (detail.expirationTime = $dayjs(detail.createTime)
                    .add(1, 'month')
                    .endOf('month')
                    .format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
            ]"
          />
        </a-form-item>
        <a-form-item field="switchOperator" label="设备网络">
          <a-checkbox-group v-model="detail.switchOperator">
            <a-checkbox :value="0">
              <template #checkbox="{ checked }">
                <div
                  align="start"
                  class="custom-checkbox-card"
                  :class="{ 'custom-checkbox-card-checked': checked }"
                >
                  <div>
                    <div className="custom-checkbox-card-title"
                      ><img src="@/assets/yd.png" alt="" /> 移动
                    </div>
                  </div>
                </div>
              </template>
            </a-checkbox>
            <a-checkbox :value="1">
              <template #checkbox="{ checked }">
                <div
                  align="start"
                  class="custom-checkbox-card"
                  :class="{ 'custom-checkbox-card-checked': checked }"
                >
                  <div>
                    <div className="custom-checkbox-card-title">
                      <img src="@/assets/lt.png" alt="" />联通
                    </div>
                  </div>
                </div>
              </template>
            </a-checkbox>
            <a-checkbox :value="2">
              <template #checkbox="{ checked }">
                <div
                  align="start"
                  class="custom-checkbox-card"
                  :class="{ 'custom-checkbox-card-checked': checked }"
                >
                  <div>
                    <div className="custom-checkbox-card-title"
                      ><img src="@/assets/dx.png" alt="" /> 电信
                    </div>
                  </div>
                </div>
              </template>
            </a-checkbox>
            <a-checkbox :value="3">
              <template #checkbox="{ checked }">
                <div
                  align="start"
                  class="custom-checkbox-card"
                  :class="{ 'custom-checkbox-card-checked': checked }"
                >
                  <div>
                    <div className="custom-checkbox-card-title"
                      ><img src="@/assets/gd.png" alt="" /> 广电
                    </div>
                  </div>
                </div>
              </template>
            </a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item field="remarks" label="订单备注">
          <a-input v-model="detail.remarks" placeholder="请输入订单备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="closeOrderTime">取消</a-button>
          <a-button type="primary" @click="orderTimeFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import {
    exportorderList,
    orderList,
    RefundS,
    submitlist,
    rebatelist,
    rebaterecovery,
    fails,
    successs,
    orderStatistics,
    rechargeCardList,
    ordercoupon,
    speedOrderList,
    changeOrderList,
    deleteorder,
    updateTime,
  } from '@/api/url'
  import useCommonStore from '@/store/modules/common'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { formpost, get, post } from '@/api/http'
  const change1024 = (item: any, value: any) => {
    if (value == 1) {
      detail.value.flowReal = item * 1024
    } else if (value == 3) {
      detail.value.flowVirtual = item * 1024
    }
  }
  const key = ref('order')
  const tableIndex = ref(0)
  function handleRowClick(record: any) {
    // 获取行的下标
    tableIndex.value = table.dataList.findIndex((element: any) => element.id === record.id)
  }
  function jiFn() {
    if (detail.value.validityMore == true) {
      const dan = Math.floor((detail.value.paymentAmount / detail.value.validity) * 100) / 100
      console.log(dan)
      detail.value.refundAmount =
        Math.floor(
          (dan * (detail.value.validity - detail.value.pageNumber) +
            (dan * detail.value.obj.remainingRatio) / 100) *
            100
        ) / 100
    } else {
      detail.value.refundAmount =
        Math.floor(((detail.value.paymentAmount * detail.value.obj.remainingRatio) / 100) * 100) /
        100
    }
  }
  function previousFn() {
    tableIndex.value--
    if (tableIndex.value < 0) {
      tableIndex.value = table.dataList.length - 1
      detailFn(table.dataList[tableIndex.value])
    } else {
      detailFn(table.dataList[tableIndex.value])
    }
    key.value = 'order'
  }

  function nextFn() {
    tableIndex.value++
    if (tableIndex.value > table.dataList.length - 1) {
      tableIndex.value = 0
      detailFn(table.dataList[tableIndex.value])
    } else {
      detailFn(table.dataList[tableIndex.value])
    }
    key.value = 'order'
  }
  function delOrder(val: any) {
    visible.value = false
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认删除',
      content: '确认删除此订单？',
      onOk: () => {
        get({
          url: deleteorder,
          data: () => {
            return {
              id: val.id,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              doRefresh()
            }
          })
          .catch(console.log)
      },
      onCancel: () => {},
    })
  }
  //关闭时间 修改弹窗
  function closeOrderTime() {
    orderTimeShow.value = false
  }

  const orderTimeShow = ref(false)

  function openOrderTime() {
    visible.value = false
    orderTimeShow.value = true
  }

  //跟踪API开始时间限制结束时间
  function changeTraceEnd(time: any) {
    return time.getTime() > new Date(detail.value.expirationTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStart(time: any) {
    return time.getTime() < new Date(detail.value.createTime).getTime() //小于开始时间的不选
  }

  //修改订单时间
  function orderTimeFn() {
    get({
      url: updateTime,
      data: () => {
        return {
          id: detail.value.id,
          effectiveTime: detail.value.effectiveTime,
          expirationTime: detail.value.expirationTime,
          effectiveState: detail.value.effectiveState,
          flowReal: detail.value.flowReal,
          flowVirtual: detail.value.flowVirtual,
          switchOperator: detail.value.switchOperator,
          remarks: detail.value.remarks ? detail.value.remarks : '',
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        closeOrderTime()
        doRefresh()
      }
    })
  }
  //邮费订单
  const tableColumns3: any = reactive({
    list: [
      {
        title: '申请时间',
        key: 'applyTime',
        dataIndex: 'applyTime',
        checked: true,
        width: 190,
      },
      {
        title: '换卡卡种',
        key: 'cardSpecies',
        dataIndex: 'cardSpecies',
        checked: true,
        width: 100,
      },
      {
        title: '支付金额',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 100,
      },

      {
        title: '换卡状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '新卡号',
        key: 'newCard',
        dataIndex: 'newCard',
        checked: true,
        width: 280,
      },
      {
        title: '收货姓名',
        key: 'name',
        dataIndex: 'name',
        checked: true,
        width: 100,
      },
      {
        title: '手机号',
        key: 'phone',
        dataIndex: 'phone',
        checked: true,
        width: 100,
      },

      {
        title: '收货地址',
        key: 'address',
        dataIndex: 'address',
        checked: true,
        width: 100,
      },
      {
        title: '快递单号',
        key: 'tradeNo',
        dataIndex: 'tradeNo',
        checked: true,
        width: 100,
      },
      {
        title: '换卡备注',
        key: 'remarks',
        dataIndex: 'remarks',
        checked: true,
        width: 100,
      },
      {
        title: '处理时间',
        key: 'handlerTime',
        dataIndex: 'handlerTime',
        checked: true,
        width: 190,
      },
      {
        title: '处理备注',
        key: 'handlerRemarks',
        dataIndex: 'handlerRemarks',
        checked: true,
        width: 100,
      },
    ],
  })
  const paginationChange = usePagination(changeOrderdoRefresh)
  const orderChangeList: any = ref([])
  const load8 = ref(false)
  //邮费订单列表
  function changeOrderdoRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier

    load8.value = true
    if (value) {
      paginationChange.page = value
    }

    get({
      url: changeOrderList,
      data: {
        page: paginationChange.page,
        size: paginationChange.pageSize,
        srcCard: detail.value.card.card,
      },
    })
      .then((res) => {
        load8.value = false
        orderChangeList.value = res.data.list
        paginationChange.setTotalSize((res.data as any).totalSize)
      })
      .catch(() => {
        load8.value = false
      })
  }
  //会员订单
  const tableColumns5: any = reactive({
    list: [
      {
        title: '会员名称',
        key: 'vipName',
        dataIndex: 'vipName',
        checked: true,
        width: 100,
      },
      {
        title: '充值金额',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 100,
      },
      {
        title: '会员时间',
        key: 'couponCount',
        dataIndex: 'couponCount',
        checked: true,
        width: 100,
      },
      {
        title: '订单状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '充值时间',
        key: 'payTime',
        dataIndex: 'payTime',
        checked: true,
        width: 190,
      },
      {
        title: '开始时间',
        key: 'addTime',
        dataIndex: 'addTime',
        checked: true,
        width: 190,
      },
      {
        title: '过期时间',
        key: 'endTime',
        dataIndex: 'endTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款时间',
        key: 'refundTime',
        dataIndex: 'refundTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款备注',
        key: 'refundRemarks',
        dataIndex: 'refundRemarks',
        checked: true,
        width: 220,
      },
    ],
  })
  const stateVisiblekl = ref(false)
  const vipOrderList = ref([])
  const paginationVip = usePagination(vipOrderdoRefresh)
  //会员订单列表
  function vipOrderdoRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier

    stateVisiblekl.value = true
    if (value) {
      paginationVip.page = value
    }

    formpost({
      url: speedOrderList,
      data: {
        page: paginationVip.page,
        size: paginationVip.pageSize,
        card: detail.value.card.card,
      },
    })
      .then((res) => {
        stateVisiblekl.value = false
        vipOrderList.value = res.data.list
        paginationVip.setTotalSize((res.data as any).totalSize)
      })
      .catch(() => {
        stateVisiblekl.value = false
      })
  }
  //券包订单
  const tableColumns4: any = reactive({
    list: [
      {
        title: '券包名称',
        key: 'couponName',
        dataIndex: 'couponName',
        checked: true,
        width: 150,
      },
      {
        title: '支付金额',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 100,
      },

      {
        title: '券包数量',
        key: 'couponCount',
        dataIndex: 'couponCount',
        checked: true,
        width: 100,
      },
      {
        title: '券包金额',
        key: 'couponAmount',
        dataIndex: 'couponAmount',
        checked: true,
        width: 100,
      },
      {
        title: '订单状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '充值时间',
        key: 'addTime',
        dataIndex: 'addTime',
        checked: true,
        width: 190,
      },
      {
        title: '过期时间',
        key: 'endTime',
        dataIndex: 'endTime',
        checked: true,
        width: 190,
      },
      {
        title: '首次使用',
        key: 'addUseTime',
        dataIndex: 'addUseTime',
        checked: true,
        width: 190,
      },
      {
        title: '最近使用',
        key: 'endUseTime',
        dataIndex: 'endUseTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款时间',
        key: 'refundTime',
        dataIndex: 'refundTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款备注',
        key: 'refundRemarks',
        dataIndex: 'refundRemarks',
        checked: true,
        width: 220,
      },
    ],
  })
  const paginationCoupon = usePagination(couponOrderdoRefresh)
  const couponOrderList = ref([])
  const loading10 = ref(false)
  //券包订单列表
  function couponOrderdoRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    loading10.value = true
    tables.tableLoading = true
    if (value) {
      paginationCoupon.page = value
    }
    formpost({
      url: ordercoupon,
      data: {
        page: paginationCoupon.page,
        size: paginationCoupon.pageSize,
        card: detail.value.card.card,
      },
    })
      .then((res) => {
        res.data.list.forEach((item: any) => {
          if (item.seriesCouponOrderInfoList) {
            item.num = 0
            item.nums = 0
            item.seriesCouponOrderInfoList.forEach((items: any) => {
              if (items.state == 0) {
                item.num++
              } else {
                item.nums++
              }
            })
          }
        })
        // tables.tableLoading = false
        couponOrderList.value = res.data.list
        paginationCoupon.setTotalSize((res.data as any).totalSize)
        loading10.value = false
      })
      .catch(() => {
        loading10.value = false
        // tables.tableLoading = false
      })
  }
  //余额订单
  const rebateLists5 = ref([])
  const columns5 = [
    {
      title: '充值金额',
      key: 'paymentAmount',
    },

    {
      title: '充值途径',
      key: 'type',
    },
    {
      title: '充值时间',
      key: 'createTime',
    },
  ]
  const load2 = ref(false)
  const pagination5 = usePagination(doRefreshOperate5)
  function doRefreshOperate5(value?: any) {
    load2.value = true
    if (value) {
      pagination5.page = value
    }
    formpost({
      url: rechargeCardList,
      data: () => {
        return {
          page: pagination5.page,
          size: pagination5.pageSize,
          card: detail.value.card.card,
        }
      },
    })
      .then((res) => {
        load2.value = false
        rebateLists5.value = res.data.list
        pagination5.setTotalSize((res.data as any).totalSize)
      })
      .catch(() => {
        load2.value = false
      })
  }
  //套餐订单
  const columnsMeal = [
    {
      title: '套餐名称',
      key: 'setMealName',
    },
    {
      title: '订单时间',
      key: 'effective',
    },
    {
      title: '订单状态',
      key: 'state',
    },
    {
      title: '充值途径',
      key: 'payType',
    },
    {
      title: '充值金额',
      key: 'paymentAmount',
    },
    {
      title: '充值时间',
      key: 'createTime',
    },
  ]
  const load1 = ref(false)
  const pagination1 = usePagination(doRefreshOrder)
  const mealOrderArray = ref([])
  function doRefreshOrder(value?: any) {
    load1.value = true
    if (value) {
      pagination1.page = value
    }
    formpost({
      url: orderList,
      data: () => {
        return {
          page: pagination1.page,
          size: pagination1.pageSize,
          cards: detail.value.card.card,
        }
      },
    })
      .then((res) => {
        load1.value = false
        mealOrderArray.value = res.data.list
        pagination1.setTotalSize((res.data as any).totalSize)
      })
      .catch(() => {
        load1.value = false
      })
  }

  const pagination = usePagination(doRefresh)
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  })
  const handleForm = ref({
    success: 1,
    up: 0,
  })
  const showV = ref(false)
  const rowKey = useRowKey('id')
  const table = useTable()
  const show: any = ref(false)
  const useCommon = useCommonStore()
  const channel: any = ref([])
  const series: any = ref([])
  const visible = ref(false)
  const visibles = ref(false)
  const details = ref()
  const card = ref('')
  const cardsVisible = ref(false)
  const ast = ref(0)
  const visibleDetails = ref(false)
  const messageVisible = ref(false)
  const selectedKeys = ref([])
  const messageVisibles = ref(false)
  const rizhiVisible = ref(false)
  const cardsVisibles = ref(false)
  const cards = ref('')
  const total: any = ref({
    amount: 0,
    profit: 0,
    rebate: 0,
  })
  const messDetail: any = ref({
    headers: '',
    body: '',
  })
  const messDetails: any = ref({
    headers: '',
    body: '',
  })

  const massList: any = ref([{ result: '' }])
  const rebateVisible = ref(false)
  const rebateList = ref([])
  const successv = ref(false)
  const up = ref(1)
  const idss = ref(0)
  const scroll = {
    x: 1500,
  }
  const columns1 = [
    {
      title: '用户名',
      key: 'userId',
    },
    {
      title: '返佣金额',
      key: 'amount',
    },
    {
      title: '返佣状态',
      key: 'state',
    },
    {
      title: '操作',
      key: 'action',
    },
  ]
  const columns = [
    {
      title: '操作人',
      dataIndex: 'name',
    },
    {
      title: '请求方式',
      dataIndex: 'type',
    },
    {
      title: '请求耗时',
      dataIndex: 'timing',
    },
    {
      title: '请求状态',
      dataIndex: 'success',
    },
    {
      title: '请求时间',
      dataIndex: 'time',
      width: 190,
    },
    {
      title: '操作',
      dataIndex: 'actions',
    },
  ]
  const detail: any = ref({
    createTime: '2023-08-24 16:12:25',
    id: 1,
    outRefundNo: '20230824161227935011',
    outTradeNo: '20230824161208245823',
    payTemplate: { merchantType: 0, merchantNo: '2021004101656942' },
    payTemplateId: 16,
    paymentAmount: 0,
    receivedAmount: 0,
    // refundAmount: 0,
    serviceCharge: 0,
    tradeNo: '2023082422001412911428476242',
    type: 0,
    user: { userName: 'user' },
    userId: 41,
    card: { series: { name: '执行程序', operator: 1, channel: { name: '迎梦云-老郭' } } },
    refundAmount: '',
    obj: {
      totalTraffic: '',
      usedTraffic: '',
      remainingTraffic: '',
      remainingRatio: '',
    },
  })
  const typeLists = ref([
    {
      name: '商户订单号',
      value: 'outTradeNo',
    },
    // {
    //   name: '支付订单号',
    //   value: 'tradeNo',
    // },
    {
      name: '客户下单IP',
      value: 'ip',
    },
  ])
  const type: any = ref('outTradeNo')
  const typeText: any = ref('')
  const userList: any = ref([])

  const loading = ref(false)
  const form: any = ref({
    addPayNumber: '',
    endPayNumber: '',
    addRefundTime: '',
    endRefundTime: '',
    addRebate: '',
    endRebate: '',
    cards: '', //卡号
    outTradeNo: '', // 商户订单号
    tradeNo: '', //支付订单号
    userIds: '', //客户ID
    channelIds: '', //渠道ID
    seriesIds: '', //系列ID
    setMealIds: '', //套餐ID
    setMealTypes: '', //套餐类型 0无限叠加1基础套餐 2叠加包 3体验包
    operators: '', //运营商 0中国移动 1中国联通 2中国电信 3中国广电
    payTypes: '', //支付类型 0余额 1支付宝 2微信 3接口 4批量
    adminCollection: '', // 收款类型 true管理员收款 false代理收款
    effectives: '', //生效状态 0立即生效 1本月生效 1次月生效 2月底顺延 3跨月顺延
    number: '', //充值次数
    states: '', //订单状态 0等待 1进行 2成功 3失败 4退款 -1删除
    payTemplateId: '', //支付模板ID
    firstCharge: '', // 是否首充true首充 false续充
    ip: '', //下单IP
    addTime: '', //开始充值时间
    endTime: '', //结束充值时间
    addPaymentAmount: '', //开始支付金额
    endPaymentAmount: '', // 结束支付金额
    addQuantity: '', //开始购买数量
    endQuantity: '', //结束购买数量
    addNumber: '', // 开始购买次数
    endNumber: '', //结束购买次数
    addCost: '', // 开始成本
    endCost: '', // 结束成本
    addProfit: '', //开始利润
    endProfit: '', //结束利润
    sort: '',
    asc: '',
  })
  const tableLoading = ref(false)
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const nameMSG = ref([
    {
      title: '订单ID',
      key: 'id',
      dataIndex: 'id',
      checked: true,
      width: 100,
    },
    {
      title: '客户账号',
      key: 'userName',
      dataIndex: 'userName',
      checked: true,
      width: 130,
    },
    {
      title: '卡号',
      key: 'card',
      dataIndex: 'card',
      checked: true,
      width: 260,
    },
    {
      title: '充值套餐',
      key: 'setMealName',
      dataIndex: 'setMealName',
      checked: true,
      width: 200,
    },
    {
      title: '充值时间',
      key: 'createTime',
      dataIndex: 'createTime',
      checked: true,
      width: 190,
    },
    {
      title: '支付金额',
      key: 'paymentAmount',
      dataIndex: 'paymentAmount',
      checked: true,
      width: 120,
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '充值途径',
      key: 'payType',
      dataIndex: 'payType',
      checked: true,
      width: 100,
    },
    {
      title: '订单状态',
      key: 'state',
      dataIndex: 'state',
      checked: true,
      width: 100,
    },

    {
      title: '生效状态',
      key: 'effectiveType',
      dataIndex: 'effectiveType',
      checked: true,
      width: 100,
    },
    {
      title: '订单时间',
      key: 'effective',
      dataIndex: 'effective',
      checked: true,
      width: 100,
    },
    {
      title: '订单类型',
      key: 'stateName',
      dataIndex: 'stateName',
      checked: true,
      width: 100,
    },
    // {
    //   title: '购买数量',
    //   key: 'quantity',
    //   dataIndex: 'quantity',
    //   checked: true,
    //   width: 100,
    // },
    {
      title: '订单成本',
      key: 'adminCost',
      dataIndex: 'adminCost',
      checked: true,
      width: 100,
    },
    {
      title: '订单佣金',
      key: 'rebate',
      dataIndex: 'rebate',
      checked: true,
      width: 100,
    },

    {
      title: '订单利润',
      key: 'profit',
      dataIndex: 'profit',
      checked: true,
      width: 100,
    },
    {
      title: '订单备注',
      key: 'remarks',
      dataIndex: 'remarks',
      checked: true,
      width: 100,
    },
    {
      title: '操作',
      key: 'actions',
      fixed: 'right',
      dataIndex: 'actions',
      width: 190,
      align: 'center',
      checked: true,
    },
  ])
  const tableColumns: any = reactive({
    neme: 'ORDER',
    list: [],
    nsma: [],
  })
  //排序
  function handleChange(data, extra, currentDataSource) {
    if (extra.sorter) {
      form.value.sort = 'amount'
      if (extra.sorter.direction == 'ascend') {
        form.value.asc = true
      } else {
        form.value.asc = false
      }
    } else {
      form.value.sort = ''
      form.value.asc = ''
    }
    console.log('change', data, extra, currentDataSource)
    doRefresh(1)
  }
  const reset = () => {
    form.value = {
      addPayNumber: '',
      endPayNumber: '',
      addRefundTime: '',
      endRefundTime: '',
      cards: '', //卡号
      outTradeNo: '', // 商户订单号
      tradeNo: '', //支付订单号
      userIds: '', //客户ID
      channelIds: '', //渠道ID
      seriesIds: '', //系列ID
      setMealIds: '', //套餐ID
      setMealTypes: '', //套餐类型 0无限叠加1基础套餐 2叠加包 3体验包
      operators: '', //运营商 0中国移动 1中国联通 2中国电信 3中国广电
      payTypes: '', //支付类型 0余额 1支付宝 2微信 3接口 4批量
      adminCollection: '', // 收款类型 true管理员收款 false代理收款
      effectives: '', //生效状态 0立即生效 1本月生效 1次月生效 2月底顺延 3跨月顺延
      number: '', //充值次数
      states: '', //订单状态 0等待 1进行 2成功 3失败 4退款 -1删除
      payTemplateId: '', //支付模板ID
      firstCharge: '', // 是否首充true首充 false续充
      ip: '', //下单IP
      addTime: '', //开始充值时间
      endTime: '', //结束充值时间
      addPaymentAmount: '', //开始支付金额
      endPaymentAmount: '', // 结束支付金额
      addQuantity: '', //开始购买数量
      endQuantity: '', //结束购买数量
      addNumber: '', // 开始购买次数
      endNumber: '', //结束购买次数
      addCost: '', // 开始成本
      endCost: '', // 结束成本
      addProfit: '', //开始利润
      endProfit: '', //结束利润
      sort: '',
      asc: '',
    }
    typeText.value = ''
    doRefresh(1)
  }

  function orderHandle() {
    if (selectedKeys.value.length) {
      handleForm.value.up = 1
      showV.value = true
    } else {
      Message.error('选中订单不能为空')
    }
  }
  const loading1 = ref(false)
  const errorList = ref([])
  const zong = ref({})
  const setTimeOut = ref()
  const count = ref(0)
  const set = ref({ id: 0 })
  function cancel() {
    clearInterval(setTimeOut.value)
    errorList.value = []
    selectedKeys.value = []
    zong.value = {
      success: 0,
      error: 0,
    }
    showV.value = false
    count.value = 0
    loading1.value = false
    doRefresh()
  }
  function OKHan() {
    loading1.value = true
    errorList.value = []
    zong.value = {
      success: 0,
      error: 0,
    }
    count.value = 0
    setTimeOut.value = setInterval(() => {
      if (count.value < selectedKeys.value.length) {
        set.value.id = selectedKeys.value[count.value]
        // 请求接口
        if (handleForm.value.success == 1) {
          requestApi(
            successs + '?id=' + selectedKeys.value[count.value] + '&submit=' + handleForm.value.up,
            selectedKeys.value[count.value]
          )
        } else {
          requestApi(
            fails + '?id=' + selectedKeys.value[count.value],
            selectedKeys.value[count.value]
          )
        }

        count.value++ // 增加计数器
        if (count.value == selectedKeys.value.length) {
          loading1.value = false
        }
      } else {
        selectedKeys.value = []
        loading1.value = false
        // 请求次数达到列表长度，清除定时器并停止
        clearInterval(setTimeOut.value)
      }
    }, 3000)
  }
  function requestApi(item: any, card: any) {
    // 这里放置你的请求代码，item是列表中的元素
    fetch(item)
      .then((response) => response.json())
      .then((res) => {
        if (res.status == true) {
          zong.value.success++
        } else {
          zong.value.error++
        }
        errorList.value.unshift('订单ID' + card + ':' + res.msg)
      })
      .catch((error) => console.log('Error:', error))
  }

  //提交上游弹窗
  function success(val: any) {
    visible.value = false
    successv.value = true
    idss.value = val
  }

  function successFn() {
    Modal.warning({
      title: '操作确认',
      content: '确定要执行此操作吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: successs,
          data: {
            id: idss.value,
            submit: up.value,
          },
        }).then((res) => {
          if (res.code == 0) {
            successv.value = false
            Message.success(res.msg)
            doRefresh()
          }
        })
      },
    })
  }

  function upFn(val: any) {
    visible.value = false
    Modal.warning({
      title: '操作确认',
      content: '确定要提交此订单吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: successs,
          data: {
            id: val,
            submit: 1,
          },
        }).then((res) => {
          if (res.code == 0) {
            successv.value = false
            Message.success(res.msg)
            doRefresh()
          }
        })
      },
    })
  }

  function typeFn() {
    for (var key in form.value) {
      if (key !== type.value) {
        form.value[key] = ''
      }
    }
  }

  //返佣列表
  function rebateFn(value: any, val?: any) {
    visible.value = true
    detail.value = value
    key.value = 'rebates'
    get({
      url: rebatelist,
      data: () => {
        return {
          id: value.id,
        }
      },
    })
      .then((res) => {
        rebateList.value = res.data
        // if (val !== 1) {
        //   rebateVisible.value = true
        // }
      })
      .catch(console.log)
  }
  //订单失败
  const fail = (item: any) => {
    visible.value = false
    Modal.warning({
      title: '操作确认',
      content: '确定要执行此操作吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: fails,
          data: {
            id: item,
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            doRefresh()
          }
        })
      },
    })
  }
  //收回返佣
  const rebateDel = (item: any, val?: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要收回此返佣吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: rebaterecovery,
          data: () => {
            return {
              orderId: item.orderId,
              userId: item.userId,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            rebateFn(item.orderId, val)
          }
        })
      },
    })
  }

  const detailFny = (val: any) => {
    messDetails.value = val
    messageVisibles.value = true
  }
  const massFn = (val: any, val1?: any) => {
    visible.value = true
    detail.value = val
    key.value = 'log'
    get({
      url: submitlist,
      data: () => {
        return {
          id: val.id,
        }
      },
    })
      .then((res) => {
        massList.value = res.data
        // if (val1 !== 1) {
        //   rizhiVisible.value = true
        // }
      })
      .catch(console.log)
  }
  const text: any = ref('展开')
  function showFn() {
    show.value = !show.value
    if (show.value == false) {
      text.value = '展开'
    } else {
      text.value = '收起'
    }
  }
  function doRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    tableLoading.value = true
    if (value) {
      pagination.page = value
    }
    form.value[type.value] = typeText.value
    formpost({
      url: orderList,
      data: () => {
        return {
          page: pagination.page,
          size: pagination.pageSize,
          ...form.value,
          userIds: form.value.userIds.toString(),
          channelIds: form.value.channelIds.toString(),
          seriesIds: form.value.seriesIds.toString(),
          setMealIds: form.value.setMealIds.toString(),
          setMealTypes: form.value.setMealTypes.toString(),
          operators: form.value.operators.toString(),
          payTypes: form.value.payTypes.toString(),
          effectives: form.value.effectives.toString(),
          states: form.value.states.toString(),
        }
      },
    })
      .then((res) => {
        tableLoading.value = false
        table.handleSuccess(res.data.list)
        pagination.setTotalSize((res.data as any).totalSize)
        formpost({
          url: orderStatistics,
          data: () => {
            return {
              ...form.value,
              userIds: form.value.userIds.toString(),
              channelIds: form.value.channelIds.toString(),
              seriesIds: form.value.seriesIds.toString(),
              states: form.value.states.toString(),
              setMealIds: form.value.setMealIds.toString(),
              setMealTypes: form.value.setMealTypes.toString(),
              operators: form.value.operators.toString(),
              payTypes: form.value.payTypes.toString(),
              effectives: form.value.effectives.toString(),
            }
          },
        })
          .then((res) => {
            total.value = res.data
          })
          .catch(console.log)
      })
      .catch(console.log)
  }

  const colse = () => {
    ast.value = 0
    cardsVisible.value = false
    cardsVisibles.value = false
  }
  const open = (val: any) => {
    if (val == 1) {
      ast.value = val
      cardsVisibles.value = true
    } else {
      ast.value = val
      cardsVisible.value = true
    }
  }
  const cardBalanceExports = () => {
    loading.value = true
    form.value[type.value] = typeText.value
    useCommon
      .downLoadPosts(exportorderList, form.value, '卡板订单列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  function cardsFn() {
    const arr = card.value.split(/\n/g)
    if (ast.value == 0) {
      typeText.value = arr.toString()
    } else {
      const arrs = cards.value.split(/\n/g)
      form.value.cards = arrs.toString()
    }
    cardsVisible.value = false
    cardsVisibles.value = false
  }
  const detailFn = (val: any) => {
    key.value = 'order'
    detail.value = JSON.parse(JSON.stringify(val))
    visible.value = true
  }

  const detailFn1 = (val: any) => {
    detail.value = JSON.parse(JSON.stringify(val))
    visibleDetails.value = true
  }
  const detailFns = (val: any) => {
    visible.value = false
    if (val.state == 4) {
      Message.error('订单已退款')
    } else {
      console.log(val)
      detail.value = JSON.parse(JSON.stringify(val))
      console.log(detail.value)
      if (detail.value.payType == 0) {
        detail.value.typeName = '余额'
      } else if (detail.value.payType == 1) {
        detail.value.typeName = '支付宝'
      } else if (detail.value.payType == 2) {
        detail.value.typeName = '微信'
      } else if (detail.value.payType == 3) {
        detail.value.typeName = '接口'
      } else if (detail.value.payType == 4) {
        detail.value.typeName = '批量'
      }
      if (detail.value.flowVirtualType == 1) {
        detail.value.obj = calculateRemainingTraffic(
          val.flowReal ? val.flowReal : 0,
          val.flowUsedVirtual ? val.flowUsedVirtual : 0
        )
      } else if (detail.value.flowVirtualType == 0) {
        detail.value.obj = calculateRemainingTraffic(
          val.flowVirtual ? val.flowVirtual : 0,
          val.flowUsedVirtual ? val.flowUsedVirtual : 0
        )
      } else {
        detail.value.obj = calculateRemainingTraffic(
          val.flowReal ? val.flowReal : 0,
          val.flowUsedVirtual ? val.flowUsedVirtual : 0
        )
      }
      detail.value.balance = ''
      detail.value.refundAmount = val.paymentAmount
      detail.value.deductionAmount = ''
      console.log(detail.value, val.paymentAmount)
      detail.value.recovery = true
      visibles.value = true
    }
  }

  function calculateRemainingTraffic(totalTraffic, usedTraffic) {
    const remainingTraffic = totalTraffic - usedTraffic
    let remainingRatio
    if (totalTraffic === 0) {
      remainingRatio = '0%'
    } else {
      remainingRatio = (remainingTraffic / totalTraffic) * 100
      remainingRatio = remainingRatio === 0 ? '0%' : Math.round(remainingRatio * 100) / 100 + '%'
    }

    function convertTraffic(traffic) {
      if (traffic === 0) {
        return '0M'
      }
      if (traffic >= 1024) {
        return Math.round((traffic / 1024) * 100) / 100 + 'G'
      }
      return Math.round(traffic * 100) / 100 + 'M'
    }

    return {
      totalTraffic: convertTraffic(totalTraffic),
      usedTraffic: convertTraffic(usedTraffic),
      remainingTraffic: convertTraffic(remainingTraffic),
      remainingRatio,
    }
  }
  const beforeClose = () => {
    details.value.resetFields()
    visibles.value = false
  }
  const refundFn = (val: any) => {
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认退款',
      content: '确认执行此操作？',
      onOk: () => {
        formpost({
          url: RefundS,
          data: () => {
            return {
              id: detail.value.id,
              recovery: detail.value.recovery,
              refundAmount: detail.value.refundAmount,
              refundRemarks: detail.value.refundRemarks,
              refundType: val,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              beforeClose()
              doRefresh()
            }
          })
          .catch(console.log)
      },
      onCancel: () => {},
    })
  }
  function rowClassNameFun(_record: any, index: number) {
    return index % 2 === 1 && table.striped.value ? 'table-striped' : null
  }

  const onUpdateBorder = (isBordered: boolean) => {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  function getList() {
    useCommon.userLists().then((res: any) => {
      userList.value = res.data
    })
  }

  function getchannel() {
    useCommon.channels1().then((res: any) => {
      channel.value = res.data
    })
  }
  function getseries() {
    useCommon.seriess().then((res: any) => {
      series.value = res.data
    })
  }
  const meal: any = ref([])
  function getMeal() {
    useCommon.mealListFn().then((res: any) => {
      meal.value = res.data
    })
  }

  const templateS: any = ref([])
  function getLists() {
    useCommon.templatesListFn(true).then((res: any) => {
      templateS.value = res.data
    })
  }

  const getTableDepartments = () => {
    useCommon.getTitleSort('ORDER').then((res) => {
      if (res.data) {
        tableColumns.list = []
        tableColumns.nsma = []
        res.data.configs.forEach((item: any) => {
          if (item.checked == true) {
            tableColumns.list.push(item)
          }
          tableColumns.nsma.push(item)
          nameMSG.value.forEach((items: any) => {
            if (items.title == item.title) {
              items.checked = item.checked
            }
          })
        })
      } else {
        let a = JSON.parse(JSON.stringify(nameMSG.value))
        tableColumns.list = a
        tableColumns.nsma = a
      }
    })
  }
  function onUpdateTable(newColumns: Array<TablePropsType>) {
    useCommon.setTitleSort({ name: 'ORDER', configs: newColumns }).then(() => {
      getTableDepartments()
    })
  }

  onMounted(async () => {
    await getTableDepartments()
    await doRefresh()
    await getList()
    await getchannel()
    await getseries()
    await getMeal()
    await getLists()
  })
</script>

<style lang="less" scoped>
  .imgsa1 {
    width: 70px;
    height: 70px;
  }
  .tabs-button {
    margin-top: 20px;
    :deep(.arco-radio-button-content) {
      width: calc(930px / 8);
      line-height: 35px;
      text-align: center;
      height: 35px;
    }
    :deep(.arco-radio-button.arco-radio-checked) {
      background-color: rgb(var(--primary-6));
      color: var(--color-bg-2);
    }
    :deep(.arco-radio-button:hover) {
      background-color: rgb(var(--primary-6));
      color: var(--color-bg-2);
    }
  }
  .demo-item {
    .text-name {
      color: #86909c;
      font-size: 14px;
    }
    .text-info {
      font-size: 16px;
      margin-top: 10px;
      display: flex;
      align-items: center;
    }
  }
  .box {
    display: flex;
    align-items: center;
    height: 30px;
    margin: 5px 10px 10px 0px;

    .line {
      width: 4px;
      height: 15px;
      margin-right: 8px;
      background-color: #40a1ff;
    }
    .text {
      display: flex;
      align-items: center;
    }
  }
  .display-box {
    display: flex;
    .display-right {
      margin-left: 20px;
      .text {
        font-size: 14px;
        color: #86909c;
        line-height: 23px;
      }
      .text-name {
        font-size: 15px;
        line-height: 25px;
        display: flex;
        align-items: center;
      }
    }
  }
  .padding20 {
    padding: 0 20px;
  }
  .img {
    width: 60px;
    height: 60px;
  }
  .imgs {
    margin-left: 10px;
    width: 60px;
    height: 60px;
  }
  .col-div {
    margin-top: 20px;
    padding: 0 20px;
    margin-bottom: 20px;
  }
  .col-div .arco-col {
    margin-bottom: 10px;
  }
  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 8px;
    background: none !important;
  }
  .hide {
    display: none;
  }
  .ba {
    display: flex;
    align-items: center;
    cursor: pointer;
    .aa {
      display: none;
    }
  }

  .ba:hover {
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: block;
      width: 18px;
    }
  }
  .imgsa {
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }

  .custom-checkbox-card {
    // border: 1px solid var(--color-border-2);
    border-radius: 4px;
    width: 70px;
    line-height: 32px;
    text-align: center;
    box-sizing: border-box;
    background-color: #f2f3f5;
  }

  .custom-checkbox-card-mask {
    height: 14px;
    width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
  }

  .custom-checkbox-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
  }

  .custom-checkbox-card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
    color: var(--color-text-1);
    font-size: 14px;
  }

  .custom-checkbox-card:hover,
  .custom-checkbox-card-checked,
  .custom-checkbox-card:hover .custom-checkbox-card-mask,
  .custom-checkbox-card-checked .custom-checkbox-card-mask {
    border-color: rgb(var(--primary-6));
  }

  .custom-checkbox-card-checked {
    border: 1px solid #3491fa;
    line-height: 30px;
    box-sizing: border-box;
    background-color: #e8f7ff;
  }

  .custom-checkbox-card:hover .custom-checkbox-card-title,
  .custom-checkbox-card-checked .custom-checkbox-card-title {
    color: rgb(var(--primary-6));
    border-radius: 5px;
    background-color: #e8f7ff;
  }

  .custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }
</style>
